<template>
	<div class="workstation">
		<el-card>
			<div class="header">
				<el-button type="primary" @click="addStation">新增工作站</el-button>
				<el-input v-model="searchName" placeholder="搜索工作站名称" style="width: 200px; margin-left: 10px"
					clearable />
				<el-input v-model="searchLocation" placeholder="搜索工作站地点" style="width: 200px; margin-left: 10px"
					clearable />
				<el-input v-model="searchProcess" placeholder="搜索所属工序" style="width: 200px; margin-left: 10px"
					clearable />
			</div>

			<el-table :data="filteredStations" style="width: 100%; margin-top: 20px" border stripe>
				<el-table-column prop="stationId" label="工作站编号" sortable></el-table-column>
				<el-table-column prop="stationName" label="工作站名称" sortable></el-table-column>
				<el-table-column prop="location" label="工作站地点" sortable></el-table-column>
				<el-table-column prop="workshop" label="所在车间" sortable></el-table-column>
				<el-table-column prop="process" label="所属工序" sortable></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="scope">
						<el-button size="small" type="primary" @click="editStation(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteStation(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 编辑/新增弹窗 -->
		<el-dialog v-model="dialogVisible" title="工作站信息" width="600px">
			<el-form :model="currentStation" label-width="120px">
				<el-form-item label="工作站编号">
					<el-input v-model="currentStation.stationId" />
				</el-form-item>
				<el-form-item label="工作站名称">
					<el-input v-model="currentStation.stationName" />
				</el-form-item>
				<el-form-item label="工作站地点">
					<el-input v-model="currentStation.location" />
				</el-form-item>
				<el-form-item label="所在车间">
					<el-input v-model="currentStation.workshop" />
				</el-form-item>
				<el-form-item label="所属工序">
					<el-input v-model="currentStation.process" />
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="currentStation.remark" type="textarea" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveStation">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 模拟数据
const stations = ref([
	{ stationId: 'WS001', stationName: '灌装工作站', location: '一车间西区', workshop: '一车间', process: '灌装', remark: '主要用于液体灌装' },
	{ stationId: 'WS002', stationName: '包装工作站', location: '二车间东区', workshop: '二车间', process: '包装', remark: '' },
])

for (let i = 3; i <= 15; i++) {
	stations.value.push({
		stationId: `WS00${i}`,
		stationName: `工作站${i}`,
		location: `车间${String.fromCharCode(65 + (i % 5))}区域`,
		workshop: `车间${String.fromCharCode(65 + (i % 5))}`,
		process: i % 3 === 0 ? '灌装' : (i % 3 === 1 ? '混合' : '包装'),
		remark: i % 2 === 0 ? '标准工作站' : '辅助工作站'
	})
}

const searchName = ref('')
const searchLocation = ref('')
const searchProcess = ref('')
const dialogVisible = ref(false)
const currentStation = ref({})

// 筛选
const filteredStations = computed(() =>
	stations.value.filter(s =>
		(!searchName.value || s.stationName.includes(searchName.value)) &&
		(!searchLocation.value || s.location.includes(searchLocation.value)) &&
		(!searchProcess.value || s.process.includes(searchProcess.value))
	)
)

// 新增
const addStation = () => {
	currentStation.value = { stationId: '', stationName: '', location: '', workshop: '', process: '', remark: '' }
	dialogVisible.value = true
}

// 编辑
const editStation = (row) => {
	currentStation.value = { ...row }
	dialogVisible.value = true
}

// 保存
const saveStation = () => {
	if (!currentStation.value.stationId || !currentStation.value.stationName) {
		ElMessage.error('工作站编号和名称不能为空')
		return
	}
	const index = stations.value.findIndex(s => s.stationId === currentStation.value.stationId)
	if (index >= 0) {
		stations.value[index] = { ...currentStation.value }
		ElMessage.success('工作站已更新')
	} else {
		stations.value.push({ ...currentStation.value })
		ElMessage.success('工作站已新增')
	}
	dialogVisible.value = false
}

// 删除
const deleteStation = (row) => {
	ElMessageBox.confirm('确认删除该工作站吗？', '提示', { type: 'warning' })
		.then(() => {
			stations.value = stations.value.filter(s => s.stationId !== row.stationId)
			ElMessage.success('工作站已删除')
		})
		.catch(() => { })
}
</script>

<style scoped>
.workstation .header {
	display: flex;
	align-items: center;
	gap: 10px;
}
</style>
  
